<template>
  <div class='info-card' @tap='clickDevice(item.orderId,item.orderType)' :animation='hideAnimation'>
        <div class='info-title' v-if='cardType==0'>
            <div>{{item.projectName}}</div>
            <div class='title-right'>
                <div class='label-sm'><img src='/static/images/list_icon_small_number@3x.png' />{{item.orderId}}</div>
                <div class='badge-wrap'>
                    <div class='badge orange' v-if='item.orderType==0'>故</div>
                    <div class='badge green' v-if='item.orderType==1'>巡</div>
                    <div class='badge blue' v-if='item.orderType==2'>维</div>
                    <div class='badge pink' v-if='item.orderType==3'>事</div>
                    <div class='badge orange ml10' v-if='item.userSum>0'>协</div>
                </div>
            </div>
        </div>
        <div class='info-title' v-if='cardType==1'>
            <div>{{item.projectName}}/{{item.devicePos}}</div>
            <div class='badge-wrap'>
                <div class='badge red' v-if='item.alarmLevel==3'>高</div>
                <div class='badge orange' v-if='item.alarmLevel==2'>中</div>
                <div class='badge green' v-if='item.alarmLevel==1'>低</div>
            </div>
        </div>
        <div class='info-content'>
            <div class='info-part' v-if='cardType==0'>
                <div class='info-line'>
                    <div v-if='item.orderType==0||item.orderType==3'>设备信息：</div>
                    <div v-if='item.orderType==1'>巡检计划：</div>
                    <div v-if='item.orderType==2'>维保计划：</div>
                    <div class='value'>{{item.title}}</div>
                </div>
                <div class='info-line'>
                    <div v-if='item.orderType==0||item.orderType==3'>故障描述：</div>
                    <div v-if='item.orderType==1'>巡检时间：</div>
                    <div v-if='item.orderType==2'>维保时间：</div>
                    <div class='value'>{{item.details}}</div>
                </div>
            </div>
            <div class='info-part' v-if='cardType==1'>
                <div class='info-line'>
                    <div>设备编号：</div>
                    <div class='value'>{{item.deviceNum}}</div>
                </div>
                <div class='info-line'>
                    <div>报警点：</div>
                    <div class='value'>{{item.tagName}}</div>
                </div>
                <div class='info-line'>
                    <div>报警描述：</div>
                    <div class='value'>{{item.alarmDesc}}</div>
                </div>
            </div>
            <div class='order-priority' v-if='item.priority'>
                <div><img src='/static/images/icon_urgency@3x.png' class='order-priority-img' /></div>
                <div class='text'>紧急</div>
            </div>
        </div>
        <div class='info-footer' v-if='cardType==0'>
            <div class='label-sm'><img src='/static/images/list_icon_small_accept@3x.png' />{{orderStatus[item.status]}}</div>
            <div class='label-sm'><img src='/static/images/list_icon_small_creator@3x.png' />{{item.userName}}</div>
            <div class='label-sm'><img src='/static/images/list_icon_small_time@3x.png' />{{time}}</div>
        </div>
        <div class='info-footer' v-if='cardType==1'>
            <div class='label-sm'>{{time}}</div>
        </div>
    </div>
</template>

<script type="text/javascript">
import moment from 'moment';
import { mapState } from 'vuex';
export default {
  props:['item','index','hide','cardType'],
  data(){
      return {
         hideAnimation:null
      }
  },
  methods:{
      clickDevice(orderId,orderType){
          this.$emit('selectDevice',orderId,orderType)
      },
      animate(){
          this.hide = true;
          let option = {
            duration: 0, // 动画执行时间
            delay:1000,
            timingFunction: 'linear' // 动画执行效果
          };
          let hideAnimation = wx.createAnimation(option);
          hideAnimation.height(0).step()
          this.hideAnimation = hideAnimation.export()
      }
  },
  computed: {
      ...mapState(['orderStatus']),
      time:function(){
          if(this.cardType==0){
              return moment(new Date(this.item.orderTime)).format('YYYY/MM/DD')
          }else if(this.cardType==1){
              return moment(new Date(this.item.alarmTime)).format('YYYY/MM/DD hh:mm')
          }
      }
  },
}
</script>

<style lang='less'>
  .info-card{
        background: #fff;
        margin: 20rpx 30rpx;
        border:1px solid #e8eae9;
        border-radius: 8rpx;
        &.hide{
            overflow: hidden;
            border: 0;
            margin: 0
        }
        .info-title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            color:#308fc9;
            border-bottom: 1px solid #dfe3e5;
            height: 80rpx;
            line-height: 80rpx;
            padding:0 20rpx;
            .title-right{
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                .label-sm{
                    height: 40rpx;
                    line-height: 40rpx;
                }
                .badge-wrap{
                    display: flex
                }
            }
            .badge{
                font-size:22rpx;
                width: 24rpx;
                height: 28rpx;
                line-height: 28rpx;
                padding: 0 6rpx;
                border-radius: 30rpx;
                color: #fff;
                &.ml10{
                    margin-left:10rpx; 
                }
                &.orange{
                    background: #f90
                }
                &.green{
                    background: #00cc00;
                }
                &.blue{
                    background: #007aff;
                }
                &.pink{
                    background:#ff33cc
                }
                &.red{
                    background:#ff0000
                }
            }
        }
        .info-content{
            border-bottom: 1px solid #dfe3e5;
            display: flex;
            .info-part{
                flex:1;
                width: 85%;
                .info-line{
                    padding:0 20rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    font-size:30rpx;
                    display: flex;
                    .value{
                        flex:1;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                }
            }
            .order-priority{
                    width: 15%;
                    display: flex;
                    color:red;
                    flex-direction: column;
                    justify-content: center;
                    text-align: center;
                    margin-right:20rpx; 
                    .order-priority-img{
                        width: 44rpx;
                        height: 44rpx;
                    }
                    .text{
                        font-size: 26rpx;
                        line-height: 30rpx;
                    }
            }
            
        }
        .info-footer{
            padding: 0 20rpx;
            display: flex;
            justify-content: space-between;
            height: 60rpx;
            line-height: 60rpx;
        }
        div.label-sm{
            color: #a4a4a4;
            font-size:22rpx;
            text-align: center;
            img{
                width:28rpx;
                height: 28rpx;
                vertical-align: middle;
                margin-top:-6rpx;
                margin-right:10rpx;  
            }
        }
    }
</style>
